<!--
 @description 配送主页
 @fileName index.vue
 @author maliang
 @created 2021/09/26 14:05:00
-->
<template>
  <div>
    <div class="top-container">
      <div class="banner">
        <img src="@/assets/image/banner-distribution.png">
      </div>
      <div class="main-core-page">
        <span class="icon-tip left" />
        <span class="icon-tip right" />
        <div class="wrapper">
          <div class="main-title">
            <div style="flex:1">核心指标</div>
            <div
              class="distribution-centre"
              @click="showActionSheet = !showActionSheet"
            >
              <span>配送中心</span>
              <span>{{ currentCenter }}</span>
              <svg-icon icon-class="xia" />
            </div>
          </div>
          <core-data
            :current-center="currentCenter"
            :core-date="coreDate"
          />
        </div>
      </div>
    </div>
    <div class="main-page">
      <module-item module-title="线路运价比率分析">
        <line-chart
          slot="content"
          :x-axis-data="freightRateXAxisData"
          :series-data="freightRateSeriesData"
          :percentage="true"
        />
      </module-item>
      <module-item module-title="发车量统计分析(整车)">
        <line-chart
          slot="content"
          :x-axis-data="departureVolumeXAxisData"
          :series-data="departureVolumeSeriesData"
        />
      </module-item>
      <module-item module-title="未发车总量统计(整车)">
        <histogram
          slot="content"
          :x-axis-data="noDepartureXAxisData"
          :series-data="noDepartureSeriesData"
        />
      </module-item>
      <module-item module-title="非整车发车情况统计">
        <histogram
          slot="content"
          :x-axis-data="nonCompleteVehicleXAxisData"
          :series-data="nonCompleteVehicleSeriesData"
          :series-bar-config="seriesBarConfig"
        />
      </module-item>
    </div>
    <van-action-sheet
      v-model="showActionSheet"
      :actions="distributionCentreList"
      cancel-text="取消"
      close-on-click-action
      @select="selectHandle"
    />
  </div>
</template>
<script>
import CoreDateMixin from '@/mixins/CoreDate'
import CoreData from './components/CoreData'
import ModuleItem from './components/ModuleItem'
import LineChart from './components/LineChart'
import Histogram from './components/Histogram'
import {
  getFreightSalesAmountRateAnalyze,
  getShipQuantityAnalyze,
  getNotShipQuantityCurrent,
  getNotCompleteCarStatistics
} from '@/apis/distribution'
export default {
  name: 'Delivery',
  components: { CoreData, ModuleItem, LineChart, Histogram },
  mixins: [CoreDateMixin],
  data() {
    return {
      showActionSheet: false,
      currentCenter: '羊马配送中心', // 当前选择的配送中心
      distributionCentreList: [
        { name: '羊马配送中心' },
        { name: '潜江配送中心' },
        { name: '清丰配送中心' }
      ],
      freightRateXAxisData: null,
      freightRateSeriesData: [
        { name: '专线', field: 'specialRate' },
        { name: '普线', field: 'generalRate' },
        { name: '总线', field: 'totalRate' }
      ],
      departureVolumeXAxisData: null,
      departureVolumeSeriesData: [
        { name: '今年', field: 'halfYearShipQuantity' },
        {
          name: '去年同期',
          field: 'correspondingPeriodQuantity'
        }
      ],
      noDepartureXAxisData: null,
      noDepartureSeriesData: [
        {
          name: '累积未发车数',
          field: 'cumulativeNotShipQuantity'
        },
        {
          name: '当日累积未发',
          field: 'todayNotShipQuantity'
        },
        {
          name: '两日以上未发',
          field: 'twoDaysNotShipQuantity'
        }
      ],
      nonCompleteVehicleXAxisData: null,
      nonCompleteVehicleSeriesData: [
        { name: '已发车', field: 'vehicleQuantity' },
        { name: '未发车', field: 'dispatchedQuantity' }
      ],
      seriesBarConfig: {
        barWidth: '20px',
        stack: 'overlap' // 堆叠效果(字符需要统一)
      } // 自定义柱状图配置
    }
  },
  watch: {
    // 监听配送中心选择
    currentCenter: {
      handler() {
        this.getCurrentPageAllChartsData()
      },
      immediate: true
    }
  },
  methods: {
    // 获取所有图表数据
    async getCurrentPageAllChartsData() {
      this.freightRateXAxisData = null
      this.departureVolumeXAxisData = null
      this.noDepartureXAxisData = null
      this.nonCompleteVehicleXAxisData = null
      const params = { center: this.currentCenter }
      // 线路运价比率分析
      const freightRateRatio = getFreightSalesAmountRateAnalyze(params)
      // 发车量统计分析
      const departureVolume = getShipQuantityAnalyze(params)
      // 未发车总量统计
      const noDeparture = getNotShipQuantityCurrent(params)
      // 非整车发车情况统计
      const nonCompleteVehicle = getNotCompleteCarStatistics(params)
      try {
        const [
          freightRateRatioRes,
          departureVolumeRes,
          noDepartureRes,
          nonCompleteVehicleRes
        ] = await Promise.all([
          freightRateRatio,
          departureVolume,
          noDeparture,
          nonCompleteVehicle
        ])
        this.freightRateXAxisData = []
        this.departureVolumeXAxisData = []
        this.noDepartureXAxisData = []
        this.nonCompleteVehicleXAxisData = []
        // 线路运价比率分析
        if (freightRateRatioRes.data) {
          const { xAxisData, seriesData } = this.resetLineChartData(
            freightRateRatioRes.data,
            this.freightRateSeriesData,
            'day'
          )
          this.freightRateXAxisData = xAxisData
          this.freightRateSeriesData = seriesData
        }
        // 发车量统计分析
        if (departureVolumeRes.data) {
          const { xAxisData, seriesData } = this.resetLineChartData(
            departureVolumeRes.data,
            this.departureVolumeSeriesData,
            'day'
          )
          this.departureVolumeXAxisData = xAxisData
          this.departureVolumeSeriesData = seriesData
        }
        // 未发车总量统计
        if (noDepartureRes.data) {
          const { xAxisData, seriesData } = this.resetLineChartData(
            noDepartureRes.data,
            this.noDepartureSeriesData,
            'center'
          )
          this.noDepartureXAxisData = xAxisData
          this.noDepartureSeriesData = seriesData
        }
        // 非整车发车情况统计
        if (nonCompleteVehicleRes.data) {
          const MAIL_TYPE = {
            EXPRESS: '快递',
            SINCE: '自提',
            LTL: '零担',
            OTHER: '其它'
          }
          nonCompleteVehicleRes.data.forEach((item) => {
            item.type = MAIL_TYPE[item.type] || item.type
          })
          const { xAxisData, seriesData } = this.resetLineChartData(
            nonCompleteVehicleRes.data,
            this.nonCompleteVehicleSeriesData,
            'type'
          )
          this.nonCompleteVehicleXAxisData = xAxisData
          this.nonCompleteVehicleSeriesData = seriesData
        }
      } catch (error) {
        this.$toast.fail('系统异常')
      }
    },
    // 折线图数据处理(list: 未处理前的图表数据；seriesData：图列名称与对应字段；xAxisField：x轴对应字段  )
    resetLineChartData(list, seriesData, xAxisField) {
      seriesData.forEach((item) => {
        item.data = []
      })
      let copyLsit = JSON.parse(JSON.stringify(list))
      const copySeriesData = JSON.parse(JSON.stringify(seriesData))
      const xAxisData = []

      if (xAxisField === 'day') {
        // 根据日期排序
        copyLsit = copyLsit.sort((a, b) => {
          return (
            Number(a.day.replace(/-/g, '')) -
                        Number(b.day.replace(/-/g, ''))
          )
        })
      }

      copyLsit.forEach((item) => {
        xAxisData.push(item[xAxisField])
        copySeriesData.forEach((row) => {
          row.data.push(item[row.field])
          // row.data.push(Math.floor(item[row.field] * 100) / 100);
        })
      })
      return {
        xAxisData,
        seriesData: copySeriesData
      }
    },
    // 切换配送中心
    selectHandle(action) {
      this.currentCenter = action.name
    }
  }
}
</script>
<style lang="less" scoped>
// 解决部分机型第一次打开日历选择弹框后出现空白的问题
/deep/.van-calendar__popup.van-popup--bottom,
.van-calendar__popup.van-popup--top {
    height: 79.9%;
}
.banner {
    margin-top: -3px;
}
.distribution-centre {
    display: flex;
    align-items: center;
    height: 26px;
    background: #f5f6f7;
    border-radius: 13px;
    padding: 0 10px;
    box-sizing: border-box;
    > span {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        letter-spacing: 1px;
        &:nth-child(1) {
            height: 14px;
            line-height: 14px;
            color: #888888;
            padding-right: 10px;
            box-sizing: border-box;
            border-right: 1px solid #d8d8d8;
        }
        &:nth-child(2) {
            color: #333333;
            padding-left: 10px;
            box-sizing: border-box;
        }
    }
    > .svg-icon {
        font-size: 0.43rem;
        color: #999;
        vertical-align: middle;
    }
}
</style>
